<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="css/base.css">
  <script src="/js/spritejs.js"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    #scene-container {
      width: 100%;
      height: 100%;
    }
    #box-rect-demo {
      position: absolute;
      padding: 20px 0 0 20px;
      top: 0;
    }
  </style>
</head>
<body>
  <div id="scene-container"></div>
  <div id="box-rect-demo">
    <div id="box-setting">
      <div>
        padding: <input id="paddingCtl" type="range" min="0" max="50" value="20"></input>
        <span id="paddingValue">20</span>
      </div>
      <div>
        border: &nbsp;&nbsp;&nbsp;<input id="borderCtl" type="range" min="0" max="20" value="5"></input>
        <span id="borderValue">5</span>
      </div>
      <div>
        rotate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="rotateCtl" type="range" min="0" max="180" value="0"></input>
        <span id="rotateValue">0</span>
      </div>
      <div>
        size: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="sizeCtl" type="range" min="100" max="200" value="100"></input>
        <span id="sizeValue">100</span>
      </div>
      <hr/>
      <div>
        contentSize: <span  id="contentSize">100,100</span>
      </div>
      <div>
        clientSize:  <span id="clientSize">140,140</span>
      </div>
      <div>
        offsetSize: <span id="offsetSize">150,150</span>
      </div>
      <div>
        originalRect:  <span id="originalRect">-75,-75,150,150</span>
      </div>
      <div>
        boundingRect: <span  id="boundingRect">-75,-75,150,150</span>
      </div>
      <div>
        originalRenderRect: <span  id="originalRenderRect">310,225,150,150</span>
      </div>
      <div>
        renderRect: <span  id="renderRect">310,225,150,150</span>
      </div>
    </div>
  </div>
  
  <script>
  const {Scene, Path} = spritejs

  /* demo: box-rect */
  ;(function () {
    const scene = new Scene('#scene-container', {
      viewport: ['auto', 'auto'],
      resolution: [770, 600],
      stickMode: 'width',
    })
    const layer = scene.layer('fglayer')

    const s1 = new Path()
    s1.attr({
      path: {
        d: 'M0,0L0,1L1,1L1,0z',
        transform: {scale: 100},
      },
      anchor: [0.5, 0.5],
      fillColor: '#f77',
      pos: [385, 300],
      padding: [20, 20, 20, 20],
      bgcolor: 'rgba(0, 0, 0, 0.3)',
      border: [5, 'black'],
      borderRadius: 10,
    })

    layer.append(s1)

    const contentSize = document.getElementById('contentSize'),
      clientSize = document.getElementById('clientSize'),
      offsetSize = document.getElementById('offsetSize'),
      originalRect = document.getElementById('originalRect'),
      boundingRect = document.getElementById('boundingRect'),
      originalRenderRect = document.getElementById('originalRenderRect'),
      renderRect = document.getElementById('renderRect'),
      paddingCtl = document.getElementById('paddingCtl'),
      borderCtl = document.getElementById('borderCtl'),
      rotateCtl = document.getElementById('rotateCtl'),
      sizeCtl = document.getElementById('sizeCtl'),
      paddingValue = document.getElementById('paddingValue'),
      rotateValue = document.getElementById('rotateValue'),
      sizeValue = document.getElementById('sizeValue'),
      borderValue = document.getElementById('borderValue')

    function box(rect) {
      const [x, y, w, h] = rect
      return [...[x, y].map(Math.floor), ...[w, h].map(Math.ceil)]
    }

    function updateState() {
      contentSize.innerHTML = s1.contentSize
      clientSize.innerHTML = s1.clientSize
      offsetSize.innerHTML = s1.offsetSize
      originalRect.innerHTML = box(s1.originalRect)
      boundingRect.innerHTML = box(s1.boundingRect)
      originalRenderRect.innerHTML = box(s1.originalRenderRect)
      renderRect.innerHTML = box(s1.renderRect)
    }
    updateState()

    paddingCtl.addEventListener('change', (evt) => {
      const value = evt.target.value
      s1.attr('padding', value)
      paddingValue.innerHTML = value
      updateState()
    })

    borderCtl.addEventListener('change', (evt) => {
      const value = evt.target.value
      s1.attr('border', [value])
      borderValue.innerHTML = value
      updateState()
    })

    rotateCtl.addEventListener('change', (evt) => {
      const value = evt.target.value
      s1.attr('rotate', [value])
      rotateValue.innerHTML = value
      updateState()
    })

    sizeCtl.addEventListener('change', (evt) => {
      const value = evt.target.value
      const path = s1.attr('path')
      path.transform.scale = value
      s1.attr({path})
      sizeValue.innerHTML = value
      updateState()
    })
  }())
  </script>
</body>
</html>
